<template>
	<view style="height: 100%;">
		<view class="tabmainview" v-if="!ishide">
			<view v-if="isccccc">
				<home ref="home" v-if="list[0]['select']"></home>
				<teacher v-if="list[1]['select']"></teacher>
				<mall v-if="list[2]['select']"></mall>
				<my v-if="list[3]['select']"></my>
			</view>
			<view v-if="!isccccc">
				<home ref="home" v-if="list[0]['select']"></home>
				
				<teacher v-if="list[1]['select']"></teacher>
				<tiwen ref="tiwen" v-if="list[2]['select']"> </tiwen>
				<mall v-if="list[3]['select']"></mall>
				<my v-if="list[4]['select']"></my>
			</view>
			<!-- <index ref="index" v-show="list[0]['select']"></index> -->
			
			<view style="width: 100%;height: 140rpx;"></view>
		</view>

		<view class="cu-bar tabbar animation-slide-bottom">
			<view class="action animation-fade" v-for="(item,index) in list">
				<view @click="changeTab(index)">
					<!-- :class="index==2?'tabicon1':'tabicon'" -->
					<image class="tabicon"
						:src="list[index]['select']?list[index].selectedIconPath:list[index].iconPath"></image>
					<view :class="[list[index]['select']?'selcolor':'text-black']">{{list[index].text}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp()
	// import index from "../tabbar/home/index";
	import home from '../home/index'
	import my from "../tabbar/user/my";
	import teacher from "../teacher/index"
	import mall from "../mall/mall"
	import tiwen from "../tabbar/tiwen/tiwen"
	import storage from "@/utils/storage.js";
	let Interval = null
	export default {
		name: 'tabbar',
		components: {
			my,
			home,
			teacher,
			mall,
			tiwen
		},
		data() {
			return {
				isccccc:false,
				ishide: false,
				noPayOrder: [],
				openCardList: [],
				aclass: "",
				isrecord: false,
				list: [{
						"select": true,
						"pagePath": "pages/index/index",
						"iconPath": "/static/img/ic-home.png",
						"selectedIconPath": "/static/img/ic-home-sel.png",
						"text": "首页"
					},
					{
						"select": false,
						"pagePath": "pages/my/index",
						"iconPath": "/static/img/ic-teacher.png",
						"selectedIconPath": "/static/img/ic-teacher-sel.png",
						"text": "老师"
					},
					{
						"select": false,
						"pagePath": "pages/my/index",
						"iconPath": "/static/img/ic-new-question.png",
						"selectedIconPath": "/static/img/ic-new-question.png",
						"text": "提问"
					}, {
						"select": false,
						"pagePath": "pages/mall/mall",
						"iconPath": "/static/img/ic-shop.png",
						"selectedIconPath": "/static/img/ic-shop-sel.png",
						"text": "商城"
					},
					{
						"select": false,
						"pagePath": "pages/my/index",
						"iconPath": "/static/img/ic-mine.png",
						"selectedIconPath": "/static/img/ic-mine-sel.png",
						"text": "我的"
					}
				]
			}
		},
		async onPullDownRefresh() {
			// await app.unilogin();
			// await app.getNoPayOrderAndOpenCard();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage() {

			let user = storage.getUserInfo();
			let path = `/pages/home/loading/loading?userId=${user.id}`;
			console.log("onShareAppMessage111111111111111111111111111111111111111111", path)
			return {
				title: ``,
				path: path
			};

		},

		onHide() {

			this.ishide = true;
			clearInterval(Interval)
		},
		onLoad(option) {
			console.log("*********************onLoad********************")
			uni.hideShareMenu({

			})
			let isccccc = uni.getStorageSync("isccccc");
			if (isccccc) {
				this.list = this.list.filter(item => {
					return item.text != "提问";
				})
			}
			this.isccccc=isccccc;
			uni.$on("changtab", (index) => {
				this.changeTab(index)
			})
			console.log('---option', option.selindex)
			if (option.selindex) {
				this.changeTab(option.selindex);
			}
			uni.$on("listenTabChange", (index) => {
				this.changeTab(index)
			})
			let user = storage.getUserInfo();
			if(user){
				uni.showShareMenu({
					
				})
			}
			
		},
		async onShow() {
			Interval = setInterval(() => {
				this.$refs["home"].dataList();
			}, 3 * 60 * 1000)
			this.ishide = false;
			// uni.$off("noPayAndOpenCardInfoSuccess");
			// uni.$on("noPayAndOpenCardInfoSuccess", () => {
			// 	let noPayAndOpenCardInfo = uni.getStorageSync("noPayAndOpenCardInfo");
			// 	let noPayOrder = noPayAndOpenCardInfo.noPayOrder || [];
			// 	let openCardList = noPayAndOpenCardInfo.openCardList || [];
			// 	this.noPayOrder = noPayOrder;
			// 	this.openCardList = openCardList
			// });
			// this.$refs["index"].init()
		},
		methods: {
			tiaozhuan() {

			},
			changeTab(selindex) {
				console.log("changeTab", selindex)
				let list = this.list;
				list.forEach((item, index) => {
					if (selindex == index) {
						item["select"] = true;
					} else {
						item["select"] = false;
					}
				});
				this.list = list;
			},
			changeRecord() {
				let user = uni.getStorageSync('user');

				if (!user.mobilephone) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '立即登录,了解更多内容!',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/subpages/public/login"
								})
								return;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/scorecard/noplayscorecard"
				})
				// if (this.isrecord) {
				// 	this.aclass = "animation-reverse animation-scale-up"

				// } else {
				// 	this.aclass = "animation-scale-up"
				// }
				// this.isrecord = !this.isrecord
			},
			recordCancel() {
				this.aclass = "animation-reverse animation-scale-down"
				setTimeout(() => {
					this.isrecord = false;
				}, 400)

			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
		height: 100%;
	}

	.selcolor {
		color: #5a5e8b;
	}

	.bg-hx {
		position: absolute;
		height: 100rpx;
		width: 100rpx;
		bottom: 66rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		animation-timing-function: ease-in-out;
		animation-name: breathe;
		animation-duration: 2700ms;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		border-radius: 50%;
		border: none;

	}

	.tabmainview {
		height: calc(100%);
		// margin-bottom: 120rpx;
		overflow-y: scroll;
	}

	.tabbar {
		z-index: 9999;
		position: fixed;
		bottom: 20rpx;
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		box-shadow: 0rpx 2rpx 22rpx 2rpx rgba(0, 0, 0, 0.2800);
		border-radius: 100rpx;
		font-size: 24rpx;
		// background: rgba($color: #fff, $alpha: 0.6);
		backdrop-filter: blur(30rpx);
	}

	.tabicon {
		width: 48rpx;
		height: 48rpx;
	}

	.tabicon1 {
		width: 58rpx;
		height: 58rpx;
	}

	.grecord {
		background: rgba($color: #fff, $alpha: 0.7);
		backdrop-filter: blur(30rpx);
		height: calc(100%);
		width: 100%;
		z-index: 10000;
		display: flex;
		position: fixed;
		top: 0;
	}

	@-webkit-keyframes breathe {
		0% {
			opacity: .2;
			box-shadow: 0 1px 2px rgba(120, 108, 214, 0.1);

			// opacity: 1;
			// border: 1px solid #786cd6;
			// box-shadow: 0 1px 30px #786cd6;
		}

		100% {
			opacity: 1;
			border: none;
			// border: 0px solid #7841d6;
			box-shadow: 0 10rpx 60rpx #7841d6;
		}
	}
</style>
